@charset "utf-8";

/*
 * Author: maximus zhang
 * ------
 * License: the MIT-LICENSE
 * -------
 * Contact: maximus.zhang(a)gmail.com
 * -------
 */

/*
 * navigation, menu: define for ul, dl etc.  [!]set background-image or border after when need.
 * ----------------
 */
.mnu,
.nav
	{
	list-style:none;
	border:0;
	height:30px;
	line-height:30px;
	overflow:hidden;
	}
.mnu
	{
	height:25px;
	line-height:25px;
	}

	/*
	 * split: [ float with width=0 ]
	 * -----
	 */
	.mnu .zl,
	.mnu .zr,
	.nav .zl,
	.nav .zr
		{
		float: left;
		height:26px;
		border:0;
		border-left:solid #88a 1px;
		border-right:solid #eef 1px;
		margin:1px;
		margin-top:2px;
		margin-left:2px;
		width:0;
		overflow:hidden;
		}
	.mnu .zl,
	.mnu .zr
		{
		margin-top:1px;
		height:22px;
		}
	.mnu .zr,
	.nav .zr
		{
		float:right;
		}

	/*
	 * items: li, dd, dt etc.
	 * -----
	 */
	.mnu .l,
	.mnu .r,
	.nav .l,
	.nav .r
		{
		float: left;
		display:block;
		padding:0;
		margin-top:2px;
		border:0;
		height:24px;
		line-height:24px;
		}
	.mnu .l,
	.mnu .r
		{
		margin-top:1px;
		height:20px;
		line-height:20px;
		}
	.mnu .r,
	.nav .r
		{
		float: right;
		}

		.mnu .l .i,
		.mnu .r .i,
		.nav .l .i,
		.nav .r .i,
		.mnu .l a,
		.mnu .r a,
		.nav .l a,
		.nav .r a
			{
			color:#00f;
			display:block;
			float:left;
			padding:1px 5px 1px 5px;
			margin:0;
			text-decoration:none;
			cursor:pointer;
			}
		.mnu .l .i,
		.mnu .r .i,
		.nav .l .i,
		.nav .r .i
			{
			cursor:default;
			}
			.mnu .l .i .t,
			.mnu .r .i .t,
			.nav .l .i .t,
			.nav .r .i .t,
			.mnu .l a .t,
			.mnu .r a .t,
			.nav .l a .t,
			.nav .r a .t
				{
				float:left;
				}
			.mnu .l a .u,
			.mnu .r a .u,
			.nav .l a .u,
			.nav .r a .u
				{
				text-decoration:underline;
				float:left;
				}
			/*
			 * icons before text and arrow for submenu.
			 * -----                 -----
			 */
			.mnu .l .i .ico,
			.mnu .r .i .ico,
			.nav .l .i .ico,
			.nav .r .i .ico,
			.mnu .l a .ico,
			.mnu .r a .ico,
			.nav .l a .ico,
			.nav .r a .ico,
			.mnu .l a .m,
			.mnu .r a .m,
			.nav .l a .m,
			.nav .r a .m,
			.dm .x a .ico,
			.dm .x a .m,
			a.btn .ico,
			/* button.cmd .ico, */
			.tab .bar ul li a .ico
				{
				border:0;
				background:transparent;
				padding:1px 4px 1px 0;
				display:block;
				float:left;
				}
			/* re-set ico for mnu */
			.mnu .l .i .ico,
			.mnu .r .i .ico,
			.mnu .l a .ico,
			.mnu .r a .ico
				{
				padding:2px 4px 2px 0;
				}
			.mnu .l a .m,
			.mnu .r a .m
				{
				padding:2px 0 2px 0;
				}
			/* re-set ico for nav */
			.nav .l .i .ico,
			.nav .r .i .ico,
			.nav .l a .ico,
			.nav .r a .ico
				{
				padding:4px 4px 4px 0;
				}
			/* hover style */
			.mnu .l a.a,
			.mnu .r a.a,
			.nav .l a.a,
			.nav .r a.a,
			.mnu .l a:hover,
			.mnu .r a:hover,
			.nav .l a:hover,
			.nav .r a:hover
				{
				color:#810716;
				padding:0 4px 0 4px;
				background-color:#fff;
				border:solid 1px #5589ab;
				}
			.mnu .l a.a,
			.mnu .r a.a,
			.nav .l a.a,
			.nav .r a.a,
			.mnu .l a:hover.a,
			.mnu .r a:hover.a,
			.nav .l a:hover.a,
			.nav .r a:hover.a
				{
				padding:0 4px 2px 4px;
				border-style:outset;
				outline:0;
				}

/*
 * dropdown menu [!]re-set top,left position after.
 * -------------
 */
.dm
	{
	position:absolute;
	top:0;
	left:0;
	width:180px;
	display:block;
	float:left;
	clear:both;
	border:outset 1px;
	background:#fff;
	overflow:hidden;
	z-index:9;
	}

	/*
	 * dropdown menu split
	 * -------------
	 */
	.dm .z
		{
		position:relative;
		display:block;
		float:left;
		width:100%;
		height:0;
		line-height:0;
		border:0;
		border-top:solid #88a 1px;
		border-bottom:solid #eef 1px;
		margin:2px;
		margin-left:0;
		overflow:hidden;
		}

.xmn
    {
    border:0;
    height:25px;
    line-height:20px;
    overflow:hidden;
    list-style:none;
    }
    .xmn .z
        {
        float: left;
        height:80%;
        border:0;
        border-left:solid #88a 1px;
        border-right:solid #eef 1px;
        margin:2px 1px 1px 2px;
        width:0;
        overflow:hidden;
        }
    .xmn .itm
        {
        float:left;
        overflow:hidden;
        margin-top:1px;
        }
        .xmn .itm a
            {
            float:left;
            color:#00f;
            display:block;
            padding:1px 5px;
            margin:0;
            text-decoration:none;
            cursor:pointer;
            }
            .xmn .itm a .md,
            .xmn .itm a .ico
                {
                border:0;
                background:transparent;
                padding:2px 4px 2px 0;
                display:block;
                float:left;
                outline:0;
                }
            .xmn .itm a .md
                {
                padding:2px 0;
                }
            .xmn .itm a .tx
                {
                float:left;
                }

            .xmn .itm a.a,
            .xmn .itm a:hover
                {
                color:#810716;
                padding:0 4px 0 4px;
                background-color:#fff;
                border:solid 1px #5589ab;
                }
            .xmn .itm a.a,
            .xmn .itm a:hover.a
                {
                padding:0 4px 2px 4px;
                border-style:outset;
                outline:0;
                }

	/*
	 * dropdown menu items
	 * -------------
	 */
	.dm .x
		{
		position:relative;
		display:block;
		float:left;
		width:100%;
		height:22px;
		line-height:22px;
		overflow:hidden;
		}
		.dm .x a
			{
			color:#000;
			text-decoration:none;
			cursor:default;
			display:block;
			width:auto;
			height:18px;
			line-height:18px;
			padding:2px 4px 2px 4px;
			}
			.dm .x a.a,
			.dm .x a:hover.a
				{
				background-color:#d5e0f0;
				color:#810716;
				}
			.dm .x a:hover
				{
				background-color:#dfe9f9;
				color:#810716;
				}

			.dm .x a .ico,
			.dm .x a .m
				{
				height:16px;
				width:16px;
				}
			.dm .x a .m
				{
				font-size:10px;
				text-align:right;
				padding:1px 0 1px 4px;
				float:right;
				}
			/*
			 * menu text / label
			 * ---------
			 */
			.dm .x a .t
				{
				float:left;
				text-transform:capitalize;
				}
			.dm .x a em,
			.dm .x a .s,
			a.btn em,
			.tab .bar ul li a em,
			.mnu .l a em,
			.mnu .r a em,
			.nav .l a em,
			.nav .r a em
				{
				float:left;
				margin-left:2px;
				font-style:normal;
				}
			.dm .x a em,
			.dm .x a .s
				{
				margin-left:8px;
				}
				.dm .x a em kbd,
				.dm .x a .s .k,
				.dm .x a .t dfn,
				a.btn em kbd,
				.tab .bar ul li a em kbd,
				.mnu .l a em kbd,
				.mnu .r a em kbd,
				.nav .l a em kbd,
				.nav .r a em kbd
					{
					font-style:normal;
					text-transform:uppercase;
					text-decoration:underline;
					}

/*
 * button <a class="btn">
 * ------
 * //for .ico, em, em kbd see settings above.
 */
a.btn
	{
	text-decoration:none;
	display:block;
	width:auto;
	float:left;
	border:outset 1px;
	line-height:normal;
	padding:2px;
	padding-left:5px;
	cursor:pointer;
	margin:2px;
	}
	/* text */
	a.btn .t
		{
		color:#00f;
		text-transform:capitalize;
		padding:1px 4px 1px 0;
		display:block;
		float:left;
		}
	/*
	 * em, em kbd for hot-keys
	 * ----------
	 * //re-set em
	 */
	a.btn em,
	.tab .bar ul li a em
		{
		color:#00f;
		margin-left:0;
		margin-right:2px;
		padding:1px 0 1px 0;
		}

	/* hover style */
	a:hover.btn
		{
		background-color:#dfe9f9;
		}
		a:hover.btn .t,
		a:hover.tab .t
			{
			color:#810716;
			text-decoration:underline;
			}

/*
 * tabs set
 * ----
 */
.tab
	{
	position:relative;
	width:100%;/* to be set in parent's width */
	float:left;
	clear:both;
	border:0;
	}
	.tab .bar
		{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:25px;
		border:0;
		overflow:hidden;
		z-index:2;
		}
		.tab .bar ul
			{
			position:relative;
			width:100%;
			list-style:none;
			float:left;
			border:0;
			margin-top:3px;
			z-index:2;
			}
			.tab .bar ul li
				{
				position:relative;
				display:inline;
				float:left;
				padding:0;
				line-height:18px;
				margin:0;
				margin-left:6px;
				z-index:2;
				}
			.tab .bar ul li.r
				{
				float:right;
				margin:0;
				}
				.tab .bar ul li a
					{
					text-decoration:none;
					background-color:#e9effe;
					border:solid 1px #ccc;
					display:block;
					float:left;
					padding:1px 0 1px 5px;
					cursor:pointer;
					z-index:2;
					}
					/* re-set em */
					.tab .bar ul li a em
					{
					padding:0 2px 0;
					}
					.tab .bar ul li a .t
						{
						color:#00f;
						text-decoration:underline;
						text-transform:capitalize;
						padding:0 5px 0 0;
						display:block;
						float:left;
						}
					.tab .bar ul li a.a,
					.tab .bar ul li a:hover
						{
						text-decoration:none;
						background-color:#f9f9f9;
						border-bottom:solid 1px #f9f9f9;
						outline:0;
						}
						.tab .bar ul li a.a .t,
						.tab .bar ul li a:hover .t
							{
							text-decoration:none;
							color:#810716;
							}
	.tab .x,
	.tab .v
		{
		float:left;
		border:solid 1px #ccc;
		background-color:#f9f9f9;
		position:absolute;
		top:25px;
		left:0;
		width:100%;
		height:275px;
		padding:4px;
		margin-top:-1px;
		z-index:0;
		overflow:auto;
		}
	.tab .v
		{
		z-index:1;
		}
/*
  * panel with title bar and content.
  * --
  */
 
.panel
	{
	border:1px solid #d8deed;
	position:relative;
	}

	.panel .bar
		{
		height:25px;
		line-height:25px;
		overflow:hidden;
		background:#bde;
		position:relative;
		}
		.panel .bar .ico
			{
			border:0;
			vertical-align:middle;
			background:transparent;
			margin-left:3px;
			margin-right:4px;
			}
		.panel .bar .tit
			{
			text-transform:capitalize;
			}
		.panel .bar .x
			{
			position:absolute;
			right:0;
			top:0;
			margin-top:4px;
			margin-right:4px;
			}

/*
 * short-cut
 * ---------
 */
.key
	{
	color:#00f;
	background:#e9effe;
	text-decoration:underline;
	border:solid 1px #d8deed;
	padding:1px 3px 2px 3px;
	margin-left:2px;
	margin-right:1px;
	}
/*
 * form style
 * ----
 */
.f
	{
	float:left;
	margin:2px;
	}
	.f dl
		{
		list-style:none;
		float:left;
		display:block;
		border:solid 1px #def;
		padding:2px;
		}
		.f dl dt
			{
			padding:2px;
			margin-bottom:2px;
			}
		.f dl dd
			{
			position:relative;
			float:left;
			width:100%;
			border:solid 1px #cde;
			line-height:20px;
			padding:2px;
			margin-top:-1px;
			}
		.f dl dd.l
			{
			width:450px;
			}
		.f dl dd.r
			{
			float:right;
			width:120px;
			height:160px;
			padding:6px;
			}
		.f dl dd.cmd
			{
			border:0;
			clear:both;
			}
			.f dl dd label
				{
				font-weight:bold;
				display:block;
				float:left;
				width:100px;
				}
			.f dl dd label.ir
				{
				width:auto;
				}
			.f dl dd .tx
				{
				float:left;
				width:200px;
				height:18px;
				line-height:18px;
				border:1px solid #ddd;
				background:#ffffef;
				}
/*
 * table-like style
 * ----------
 */
.tb
	{
	position:relative;
	border:0;
	display:block;
	float:left;
	padding-bottom:1px;
	}
	.tb .h,
	.tb .d
		{
		position:relative;
		display:block;
		float:left;
		border:solid #a6bcc8 1px;
		width:601px;
		line-height:20px;
		margin-bottom:-1px;
		}
	.tb .h
		{
		text-align:center;
		font-weight:bold;
		}
		.tb .d .k
			{
			text-align:left;
			display:block;
			float:left;
			width:200px;
			border-right:solid #a6bcc8 1px;
			}
		.tb .d .v
			{
			text-align:left;
			display:block;
			float:left;
			width:400px;
			margin-left:-1px;
			border-left:solid #a6bcc8 1px;
			}
button.cmd
	{
	text-align:left;
	padding:1px 2px 1px 2px;
	margin:2px;
	}
	button.cmd .ico,
	button.cmd .t
		{
		padding:1px 2px 1px 2px;
		}
	button.cmd .t
		{
		color:#00f;
		text-decoration:underline;
		}
/*
 * global color set
 * ------
 */
.c_r
	{
	color:red;
	}
.c_g
	{
	color:green;
	}
.c_b
	{
	color:blue;
	}
.f_u
	{
	text-transform:uppercase;
	}
.f_l
	{
	text-transform:lowercase;
	}
.f_c
	{
	text-transform:capitalize;
	}
